<template>
	<view class="page">
		<template v-if="token&&isLogin">
			<view class="body">

				<view class="lay-btn-wrap">
					<view class="lay-btn-item avator">
						<view class="content">
							<view class="label-name">头像</view>
							<view class="val">
								<view class="con-text"></view>
								<view class="avator-img">
									<image src="@/static/images/user_avator.jpg" mode="widthFix"></image>
								</view>
							</view>
							<view class="right-icon">
								<view class="iconfont icon-corrow">&#xe653;</view>
							</view>
						</view>
					</view>
				</view>

				<view class="lay-btn-wrap">
					<view class="lay-btn-item">
						<view class="content">
							<view class="label-name">昵称</view>
							<view class="val">
								<view class="con-text split">{{userInfo.realname}}</view>
								<!-- <view class="link-text f-blue">修改昵称</view> -->
							</view>
							<view class="right-icon">
								<view class="iconfont icon-corrow">&#xe653;</view>
							</view>
						</view>
					</view>
					<view class="lay-btn-item">
						<view class="content">
							<view class="label-name">手机号</view>
							<view class="val">
								<view class="con-text split">{{phone}}</view>
								<view class="link-text f-blue" @click="changeInfo('phone')">改绑手机</view>
							</view>
							<view class="right-icon">
								<view class="iconfont icon-corrow">&#xe653;</view>
							</view>
						</view>
					</view>
					<view class="lay-btn-item">
						<view class="content">
							<view class="label-name">密码</view>
							<view class="val">
								<view class="con-text split">******</view>
								<view class="link-text f-blue" @click="changeInfo('password')">重置密码</view>
							</view>
							<view class="right-icon">
								<view class="iconfont icon-corrow">&#xe653;</view>
							</view>
						</view>
					</view>
					<!-- <view class="lay-btn-item" data-url="/pages/member/certification/certification" @click="$login.event($event,1,'navigate')"> 
					<view class="content">							
						<view class="label-name">实名认证</view>
						<view class="val">
							<view class="con-text split">未认证</view> 
							<view class="link-text">去认证</view>
						</view>
						
						<view class="right-icon">
							<view class="iconfont icon-corrow">&#xe68a;</view>
						</view>
					</view>
				</view> -->
				</view>

				<!-- <view class="lay-btn-wrap m-b2">
				<navigator url="/package_member/upbindwx/upbindwx" hover-class="none" class="lay-btn-item">
					<view class="content">							
						<view class="label-name">绑定微信</view>
						<view class="val">
							<view class="con-text split">{{userInfo.nickname}}</view> 
							<view class="link-text f-blue">取消绑定</view>
						</view>
						
						<view class="right-icon">
							<view class="iconfont icon-corrow">&#xe653;</view>
						</view>
					</view>
				</navigator>
			</view> -->

				<view class="btn m-t2" @click="logout">退出登录</view>

			</view>
		</template>
		<view v-if="flag.isFullPage" class="full-fix-page">

			<template>
				<!-- 验证手机 -->
				<view v-if="flag.isCheckPhone" class="popup-wrap a-fadein">
					<view class="popup-type-model ">
						<view class="close-btn iconfont f-s54" @click="closeSendCode">&#xe65b;</view>
						<view class="popup-body">
							<view class="title">验证手机</view>
							<view class="content get-code-popup">
								<view class="phone-text">手机号：{{phone}}</view>
								<view class="code-bar">
									<input type="number" v-model="phone_code" placeholder="输入验证码">
									<view class="get-code-btn" @click="getCode('check')">{{count_time_text}}</view>
								</view>
								<view class="code-comfirm-btn" @click="comfirmCode">确定</view> 
							</view>
						</view>
					</view>
				</view>
				
				<!-- 绑定新手机 -->
				<view v-if="flag.isBindPhone" class="popup-wrap a-fadein">
					<view class="popup-type-model ">
						<view class="close-btn iconfont f-s54" @click="closeSendCode">&#xe65b;</view>
						<view class="popup-body">
							<view class="title">绑定新手机</view>
							<view class="content get-code-popup">
								<view class="code-bar">
									<input type="number" v-model="new_phone" placeholder="输入新手机号">
								</view>
								<view class="code-bar">
									<input type="number" v-model="phone_code" placeholder="输入验证码">
									<view class="get-code-btn" @click="getCode('bind')">{{count_time_text}}</view>
								</view>
								<view class="code-comfirm-btn" @click="bindNewPhone">确定</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 修改密码 -->
				<view v-if="flag.isRestPassword" class="popup-wrap a-fadein">
					<view class="popup-type-model ">
						<view class="close-btn iconfont f-s54" @click="closeSendCode">&#xe65b;</view>
						<view class="popup-body">
							<view class="title">重置密码</view>
							<view class="content get-code-popup">
								<view class="code-bar">
									<input type="password" v-model="password" placeholder="输入新密码">
								</view>  
								<view class="code-bar">
									<input type="password" v-model="reset_password" placeholder="确认新密码">
								</view> 
								<view class="code-comfirm-btn" @click="resetPassword">确定</view>
							</view>
						</view>
					</view>
				</view>

			</template>


		</view>
	</view>
</template>

<script>
	import {
		replaceStr,
		checkPhone
	} from '@/common/util.js'
	import {
		appid
	} from '@/config.js'
	import Timer from '@/common/timer.js'
	export default {
		name: 'demo',
		data() {
			return {
				isLogin: false,
				appid: appid,
				token: uni.getStorageSync('token'),
				userInfo: uni.getStorageSync('userInfo'),
				phone: '',
				phone_code: '',
				loginStateUpdate: false,
				new_phone: '',
				flag: { // 弹窗相关
					isFullPage: false,
					isCheckPhone: false,
					isBindPhone: false,
					isRestPassword:false
				},
				password:'',
				reset_password:'',
				updateType:'phone',
				count_time_text: '获取验证码',
				timer: null,
				isSentCode: true,
				bindPhoneStep_2: false,
				isComfirmLogin: true
			}
		},
		async onShow() {
			if (this.loginStateUpdate) {
				this.userInfo = uni.getStorageSync('userInfo');
				this.token = uni.getStorageSync('token');
				this.phone = replaceStr(this.userInfo.phone, 3, '****');
				this.isLogin=true;
				this.loginStateUpdate = false;
			}
			if(!this.token&&!this.isLogin){
				this.isLogin = await this.$loginState('reset');
			}
		},
		async onLoad() {
			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					this.phone = replaceStr(this.userInfo.phone, 3, '****');
				} else {
					this.isLogin = await this.$loginState('reset');
				}
			}  
		},
		methods: {
			logout: function() {
				uni.showModal({
					content: '确定要退出登录吗？',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '退出登录',
								mask: true,
								success() {
									uni.removeStorageSync('cookieKey');
									uni.removeStorageSync('userInfo');
									uni.removeStorageSync('token');
									setTimeout(() => {
										uni.hideLoading();

										uni.reLaunch({
											url: '/pages/login/login'
										})
									}, 500)
								}
							})


						} else {

						}
					}
				})
			},

			checkPhoneCodeInit: function() {
				console.log(1)
				this.phone_code = '';
				this.new_phone = '';
				if (this.timer) {
					this.timer.stop();
					this.count_time_text = '获取验证码';
				}
			},

			changeInfo: function(type) {
				this.updateType=type;
				this.showPopup('show', 'isCheckPhone');
			},

			// 绑定新手机
			bindNewPhone: async function() {
				let _this = this;
				if (this.new_phone == '' || !checkPhone(this.new_phone)) {
					uni.showToast({
						icon: 'none',
						title: '手机号为空或格式错误',
						mask: true,
						duration: 2000
					})
					return
				} else if (this.phone_code == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入短信验证码',
						mask: true,
						duration: 2000
					})
					return
				} else {
					if (this.isComfirmLogin) {
						this.isComfirmLogin = false;
						let checkPhoneCode = await this.checkPhoneCode();
						if (checkPhoneCode) {
							let isUpdateSuccess = await this.updateInfo('phone', this.new_phone);
							if (isUpdateSuccess) {
								setTimeout(() => {
									_this.showPopup('hide');
									_this.new_phone = '';
									_this.isComfirmLogin = true;
									_this.checkPhoneCodeInit();
								}, 1000)
							} else {
								setTimeout(() => {
									_this.isComfirmLogin = true;
									_this.checkPhoneCodeInit();
								}, 1000)
							}
						} else {
							setTimeout(() => {
								_this.isComfirmLogin = true;
							}, 1000)
						}


					}
				}
			},
			
			// 重置密码
			resetPassword:async function(){
				let _this = this;
				if (this.password == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入新密码',
						mask: true,
						duration: 2000
					}) 
				}else if(this.reset_password==''){
					uni.showToast({
						icon: 'none',
						title: '请再次输入新密码',
						mask: true,
						duration: 2000
					}) 
				}else if(this.password != this.reset_password){
					uni.showToast({
						icon: 'none',
						title: '两次输入密码不一致',
						mask: true,
						duration: 2000
					}) 
				}else{
					if (this.isComfirmLogin) {
						this.isComfirmLogin = false;						 
						let isUpdateSuccess = await this.updateInfo('new_password', this.password);
						if (isUpdateSuccess) {
							setTimeout(() => {
								uni.clearStorage();
								uni.reLaunch({
									url:'/pages/login/login'
								})
								// _this.showPopup('hide'); 
								// _this.isComfirmLogin = true;
								// _this.checkPhoneCodeInit();
							}, 1000)
						} else {
							setTimeout(() => {
								_this.isComfirmLogin = true; 
							}, 1000)
						}
					
					}
				}
			},

			updateInfo: async function(key, value) {
				let _this = this;
				let data = {};
				data.user_id = this.userInfo.uid;
				data.appid = this.appid;
				data.token = this.token;
				data[key] = value;

				let res = await this.$api.user_api.updateUserInfo(data)
				if (res.data.ret == 1000) {		
					let userInfo = res.data.data;
					this.phone = replaceStr(res.data.data.phone, 3, '****'); 
					
					console.log(userInfo)
					uni.showToast({
						icon: 'success',
						title: res.data.message,
						mask: true,
						duration: 1000,
						success() {
					
						}
					})
					
					uni.setStorage({
						key: 'userInfo',
						data: res.data.data
					})
					return true;
				} else {
					uni.showToast({
						icon: 'none',
						image: '../../static/images/error.png',
						title: res.data.message,
						mask: true,
						duration: 1000,
						success() {

						}
					})
					return false;
				}
			},

			getCode: async function(type) {
				// type 2 绑定手机 3 验证手机
				let _this = this;
				let phone = '';
				if (type == 'check') {
					phone = this.userInfo.phone;
				} else if (type == 'bind') {
					if (this.new_phone == '' || !checkPhone(this.new_phone)) {
						uni.showToast({
							icon: 'none',
							title: '手机号为空或格式错误',
							mask: true,
							duration: 2000
						})
						return
					}
					phone = this.new_phone;
				}
				if (this.isSentCode) {
					this.isSentCode = false;
					let res = await this.$api.user_api.sendSms({
						uid: this.userInfo.uid,
						appid: this.appid,
						token: this.token,
						phone: phone,
						type: 2 // 1 登录  2 绑定手机  3 验证手机
					})
					if (res.data.ret == 1000) {
						this.timer = new Timer({
							type: '1',
							num: 60
						});
						this.timer.start({
							success: function(res) {
								_this.count_time_text = res + 's';
								_this.isSentCode = true;
							},
							complate: function() {
								_this.count_time_text = '获取验证码';
								_this.isSentCode = true;
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							image: '../../static/images/error.png',
							title: res.data.message,
							mask: true,
							duration: 2000,
							success() {
								setTimeout(() => {
									_this.isSentCode = true;
								}, 300)
							}
						})
					}

				}
			},

			checkPhoneCode: async function() {
				let res = await this.$api.user_api.checkSms({
					uid: this.userInfo.uid,
					appid: this.appid,
					token: this.token,
					code: this.phone_code
				})
				if (res.data.ret == 1000) {
					return true
				} else {
					uni.showToast({
						icon: 'none',
						image: '../../static/images/error.png',
						title: res.data.message,
						mask: true,
						duration: 1000,
					})
					setTimeout(() => {
						_this.checkPhoneCodeInit();
					}, 300)
					return false
				}
			},

			// 验证验证码
			comfirmCode: async function() {
				console.log(this.updateType)
				let _this = this;

				if (this.phone_code == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入短信验证码',
						mask: true,
						duration: 2000,
					})
				} else {
					if (this.isComfirmLogin) {
						this.isComfirmLogin = false;
						let checkPhoneCode = await this.checkPhoneCode();

						if (checkPhoneCode) {

							// 验证成功 进入下一步
							uni.showToast({
								icon: 'success',
								title: '验证成功',
								mask: true,
								duration: 1000,
								success() {
									setTimeout(() => {
										_this.showPopup('hide');
										if(_this.updateType=='phone'){
											_this.showPopup('show', 'isBindPhone');
										}else if(_this.updateType=='password'){
											_this.showPopup('show', 'isRestPassword');
										}
										
										_this.isComfirmLogin = true;
										_this.checkPhoneCodeInit();
									}, 1000)
								}
							})

						} else {
							_this.phone_code = '';
							setTimeout(() => {
								_this.isComfirmLogin = true;
							}, 1000)
						}
					}

				}

			},

			closeSendCode: function() {
				this.checkPhoneCodeInit();
				if (this.timer) {
					this.timer.stop();
				}
				this.showPopup('hide');
			},

			showPopup: function(t, n) {
				if (t == 'show') {
					this.flag.isFullPage = true;
					this.flag[n] = true;
				} else if (t == 'hide') {
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}
			},
		},
		computed: {

		},
		components: {

		},
		onUnload() {
			if (this.timer) {
				this.timer.stop();
			}
		},
	}
</script>

<style lang="less">
	.avator {
		line-height: 120rpx;

		.avator-img {
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;

			image {
				width: 100%;
				border-radius: 50%;
			}
		}
	}

	.lay-btn-wrap {
		margin-top: 20rpx;
		padding-left: 20rpx;
		background: #fff;
		border-bottom: 2rpx solid #eee;
	}

	.lay-btn-item {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.icon-label {
			display: flex;
			align-items: center;
			width: 60rpx;
			text-align: center;
			color: #09f;

			image {
				width: 38rpx;
			}
		}

		.content {
			display: flex;
			align-items: center;
			flex-grow: 2;
			width: 80%;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #eee;

			.label-name {
				width: 150rpx;
				display: flex;
				font-size: 28rpx;
				color: #000;

				image {
					width: 100rpx;
				}
			}

			.val {
				display: flex;
				justify-content: space-between;
				flex-grow: 2;
				width: 60%;
				margin-right: 8rpx;
				font-size: 28rpx;
				color: #666;

				.con-text {
					flex-grow: 2;
					max-width: 80%;
				}

				.link-text {
					color: #666;
				}
			}

			.right-icon {
				width: 50rpx;

				.icon-corrow {
					color: #ccc;
				}
			}

			.switch-btn {
				width: 100rpx;
			}
		}

	}

	.lay-btn-item:last-child .content {
		border-bottom: 0 none;

	}

	.btn {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin-bottom: 20rpx;
		background: #fff;
		color: #0085FF;
		font-size: 32rpx;
	}

	.code-bar {
		display: flex;
		height: 80rpx;
		border: 1rpx solid #eee;
		border-radius: 15rpx;
		margin-bottom: 40rpx;

		input {
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 10rpx;
			font-size: 30rpx;
		}

		.get-code-btn {
			flex-shrink: 0;
			width: 35%;
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
			color: #09f;
		}
	}

	.get-code-popup {
		.phone-text {
			margin-bottom: 30rpx;
			color: #666;
		}

		.code-comfirm-btn {
			height: 70rpx;
			line-height: 70rpx;
			margin: 0 auto;
			background: #09f;
			border-radius: 8rpx;
			color: #fff;
			text-align: center;
			font-size: 30rpx;
		}
	}
</style>
